昨天我們透過 Provider / Consumer 及 useContext ，實現了跨元件的狀態共享。

      <ThemeProvider>
        <SnackbarProvider>
          <AuthProvider>
            <ApiProvider>
              <App />
            </ApiProvider>
          </AuthProvider>
        </SnackbarProvider>
      </ThemeProvider>

Recoiljs 是 Facebook 底下的一個團隊，提出的一個狀態管理（State Management）工具，目前還在實驗性質！ 我也是首次在 ReactEurope 2020 Conference見到。

以下為官網的導讀：

動機

從 簡便性 與 兼容性 的考量，我們最好使用 React 內建的狀態管理系統，而不是外部的全域(Global)狀態，但 React 本身還是有些限制、侷限如下：

1. 假如需要共享某個狀態時，我們必須把這個狀態從元件抽出來，往父層提升( 把 state 抽成 props 從父元件帶下去 )！ 但可能因為這個共享狀態改變，而造成一個巨大的元件樹需要 重新渲染 ( re-render ) 底下的元件。
2. 假如我們抽出來放到 context ，一個 context 只能存放一個值。不能放一組 不確定 的值。

舉昨天的範例：

我們的是一個物件，並且給定一個確定的屬性 theme 跟一個方法叫做 toggleTheme

export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {}
})

我們後來才在自己的元件<ThemeProvider> ，重新給定、提供 defaultValue。

const ThemeProvider = ({ children }) => {
  const [dark, setDark] = useState(true);
  const toggleTheme = () => setDark(!dark);
  const theme = dark ? themes.dark : themes.light;
  const defaultValue = {
    toggleTheme,
    theme
  };
  return (
    <ThemeContext.Provider value={defaultValue}>
      {children}
    </ThemeContext.Provider>
  );
};

只要末端有元件使用共享狀態，以上兩點使我們難以對這個 App 的元件樹，從頂層開始難以進行代碼分割 (code-split)。

於是，我們的 Recoil 就誕生了!!! 當然，對於狀態管理，有許多人提出各種解決方案。不過我們本篇就從探索Recoil 開始吧!!!!!!